﻿@page "/gantt-chart/taskbar-template"
@using Syncfusion.Blazor.Gantt
@using ej2_blazor_taskbartemplatedata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the complete event schedule of the 90th Academy awards. Taskbars are customized using template support and timeline header is customized for a better view of the data.</p>
</SampleDescription>
<ActionDescription>
    <p>
        The Gantt Chart provides support for customizing taskbar UI using taskbar template feature. The <code>TaskbarTemplate</code>
        property accepts either string or HTML element`s ID value, which will be used as the template for the taskbars.
        The summary tasks and the milestone items can also customized using the <code>ParentTaskbarTemplate</code> and <code>MilestoneTemplate</code> properties.
        In this demo, we have customized the taskbar UI by using the HTML elements between the template tags and displays the data from custom columns.
    </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt RowHeight="75" TaskbarHeight="50"
                     ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd" DurationUnit="DurationUnit.Minute"
                     DateFormat="hh:mm tt" DataSource="@TaskCollection" Height="450px" Width="100%">
                <Syncfusion.Blazor.Gantt.GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Dependency="Predecessor" ParentID="ParentId"></Syncfusion.Blazor.Gantt.GanttTaskFields>
                <GanttColumns>
                    <GanttColumn Field="TaskId" HeaderText="Event Id"></GanttColumn>
                    <GanttColumn Field="TaskName" HeaderText="Event Name" Width="150"></GanttColumn>
                    <GanttColumn Field="StartDate" HeaderText="Start Time"></GanttColumn>
                    <GanttColumn Field="EndDate" HeaderText="End Time"></GanttColumn>
                    <GanttColumn Field="Winner" HeaderText="Winner"></GanttColumn>
                    <GanttColumn Field="Movie" HeaderText="Movie"></GanttColumn>
                    <GanttColumn Field="Performance" HeaderText=" Performance" Width="200"></GanttColumn>
                </GanttColumns>
                <GanttEventMarkers>
                    <GanttEventMarker Day="@EventDay1" Label="Performance"></GanttEventMarker>
                    <GanttEventMarker Day="@EventDay2" Label="Moments"></GanttEventMarker>
                    <GanttEventMarker Day="@EventDay3" Label="Performance"></GanttEventMarker>
                    <GanttEventMarker Day="@EventDay4" Label="Moments"></GanttEventMarker>
                    <GanttEventMarker Day="@EventDay5" Label="Moments"></GanttEventMarker>
                    <GanttEventMarker Day="@EventDay6" Label="Performance"></GanttEventMarker>
                    <GanttEventMarker Day="@EventDay7" Label="Moments"></GanttEventMarker>
                </GanttEventMarkers>
                <GanttLabelSettings LeftLabel="TaskName" TValue="TaskbarTemplateData.TaskbarData">
                </GanttLabelSettings>
                <GanttSplitterSettings Position="30%"> </GanttSplitterSettings>
                <GanttTemplates TValue="TaskbarTemplateData.TaskbarData">
                    <TaskbarTemplate>
                        @if ((context as TaskbarTemplateData.TaskbarData).TaskName == "Oscar moments")
                        {
                            <div class="e-gantt-child-taskbar e-custom-moments" style="height:50px;border-radius:5px;">
                                @if (Convert.ToInt64((context as TaskbarTemplateData.TaskbarData).Duration) < 4)
                                {
                                    <img class="moments" height="32" width="44" />
                                }
                                else
                                {
                                    <img class="moments" height="32" width="44" />
                                    <span class="e-task-label" style="position:absolute;top:15px;font-size:12px;text-overflow:ellipsis;height:90%;overflow:hidden;">@((context as TaskbarTemplateData.TaskbarData).Performance)</span>
                                }
                            </div>
                        }
                        else if ((context as TaskbarTemplateData.TaskbarData).TaskName == "Oscar performance")
                        {
                            <div class="e-gantt-child-taskbar e-custom-performance" style="height:50px;border-radius:5px;">
                                @if (Convert.ToInt64((context as TaskbarTemplateData.TaskbarData).Duration) <= 5)
                                {
                                    <img class="face-mask" height="32" width="32" />
                                }
                                else
                                {
                                    <img class="face-mask" height="32" width="32" />
                                    <span class="e-task-label" style="position:absolute;top:5px;font-size:12px;text-overflow:ellipsis;height:90%;overflow:hidden;">@((context as TaskbarTemplateData.TaskbarData).Performance)</span>
                                } 
                            </div>
                        }
                        else
                        {
                            <div class="e-gantt-parent-taskbar e-custom-parent" style="height:50px;border-radius:5px;text-overflow:ellipsis;">
                                @if (Convert.ToInt64((context as TaskbarTemplateData.TaskbarData).Duration) < 4)
                                {
                                    <img class="oscar" height="32" width="32" />
                                }
                                else
                                {
                                    @if (!string.IsNullOrEmpty(((context as TaskbarTemplateData.TaskbarData).Winner)) && !string.IsNullOrEmpty(((context as TaskbarTemplateData.TaskbarData).Movie)))
                                    {
                                        <img class="oscar" height="32" width="32" />
                                        <span class="e-task-label" style="position:absolute; top:13px;font-size:14px;">@((context as TaskbarTemplateData.TaskbarData).Winner)</span>
                                        <span class="e-task-label" style="position:absolute;top:33px;font-size:10px;text-overflow:ellipsis;">@((context as TaskbarTemplateData.TaskbarData).Movie)</span>
                                    }
                                    else if (!string.IsNullOrEmpty(((context as TaskbarTemplateData.TaskbarData).Movie)))
                                    {
                                        <img class="oscar" height="32" width="32" />
                                        <span class="e-task-label" style="position:absolute; top:18px;font-size:12px;text-overflow:ellipsis;">@((context as TaskbarTemplateData.TaskbarData).Movie)</span>
                                    }
                                    else
                                    {
                                        <span class="e-task-label"></span>
                                    }
                                }
                            </div>
                        }
                    </TaskbarTemplate>
                    <MilestoneTemplate>
                        <div style="margin-top:-7px;">
                            <div class="e-gantt-milestone" style="position:absolute;">
                                <img class="moments" height="24" width="48" />
                                <div class="e-milestone-top" style="border-right-width:26px; margin-top: -24px;border-left-width:26px;border-bottom-width:26px;"></div>
                                <div class="e-milestone-bottom" style="top:26px;border-right-width:26px; border-left-width:26px; border-top-width:26px;"></div>
                            </div>
                        </div>
                    </MilestoneTemplate>
                </GanttTemplates>
                <GanttTimelineSettings TimelineUnitSize="75">
                    <GanttTopTierSettings Unit="TimelineViewMode.Hour" Format="MMM dd, yyyy"></GanttTopTierSettings>
                    <GanttBottomTierSettings Unit="TimelineViewMode.Minutes" Count="2" Format="h:mm tt"></GanttBottomTierSettings>
                </GanttTimelineSettings>
                <GanttDayWorkingTimeCollection>
                    <GanttDayWorkingTime From="0" To="24"></GanttDayWorkingTime>
                </GanttDayWorkingTimeCollection>
            </SfGantt>
        </div>
    </div>
</div>

@code{
    public DateTime EventDay1 = new DateTime(2018, 3, 5, 19, 9, 0);
    public DateTime EventDay2 = new DateTime(2018, 3, 5, 19, 46, 0);
    public DateTime EventDay3 = new DateTime(2018, 3, 5, 19, 59, 0);
    public DateTime EventDay4 = new DateTime(2018, 3, 5, 20, 8, 0);
    public DateTime EventDay5 = new DateTime(2018, 3, 5, 20, 24, 0);
    public DateTime EventDay6 = new DateTime(2018, 3, 5, 20, 31, 0);
    public DateTime EventDay7 = new DateTime(2018, 3, 5, 20, 47, 0);
    public DateTime ProjectStart = new DateTime(2018, 3, 5, 18, 0, 0);
    public DateTime ProjectEnd = new DateTime(2018, 3, 6, 18, 0, 0);
    public List<TaskbarTemplateData.TaskbarData> TaskCollection { get; set; }
	
    protected override void OnInitialized()
    {
        this.TaskCollection = TaskbarTemplateData.TaskTemplateData();
    }
}

<style>
    .e-custom-parent {
        background-color: #6d619b;
        border: 1px solid #3f51b5;
    }
    .e-custom-performance {
        background-color: #ad7a66;
        border: 1px solid #3f51b5;
    }
    .e-custom-moments {
        background-color: #7ab748;
        border: 1px solid #3f51b5;
    }
    .moments, .face-mask, .oscar {
        position: relative;
        top: 12px;
        bottom: 2px;
        left: 5px;
        padding-right: 4px;
    }
    .e-milestone-top {
        border-bottom-color: #7ab748 !important;
        border-bottom: 1px solid #3f51b5;
    }
    .e-milestone-bottom {
        border-top-color: #7ab748 !important;
        border-top: 1px solid #3f51b5;
    }
    .oscar {
        content: url('');
    }
    .face-mask {
        content: url('');
    }
    .moments {
        content: url('');
    }
</style>